<template>
  <div class="contain">
    <!-- 大标题 -->
    <el-row class="title">
      <div>MTCD Predictive Maintenance System</div>
    </el-row>
    <div class="content_main">
      <div class="left">
        <div>
          <h3 style="text-align: center">设备点检</h3>
          <div>
            <div class="div1"
                 style="background: #C785ED;text-align: center">
              <svg-icon icon-class="user"
                        class-name='leftimg' />
              <div>人员总数</div>
              <div>0</div>
            </div>
            <div class="div2"
                 style="background: #F9B641;text-align: center">
              <svg-icon icon-class="user"
                        class-name='leftimg' />
              <div>人员总数</div>
              <div>0</div>
            </div>
            <div class="div3"
                 style="background: #5CBBFF;text-align: center">
              <svg-icon icon-class="user"
                        class-name='leftimg' />
              <div>人员总数</div>
              <div>0</div>
            </div>
          </div>
          <div id="chart_left"></div>

          <div style="background:blue;text-align: center">
            点检状态
          </div>

          <div>
            <div class="count_lable_tite">总数</div>
            <div class="count_lable_tite">已检</div>
            <div class="count_lable_tite">漏检</div>
            <div class="count_lable_tite">合格</div>
            <div class="count_lable_tite">异常</div>
            <div class="count_lable"
                 style=" background: yellow">20</div>
            <div class="count_lable"
                 style=" background: blue">19</div>
            <div class="count_lable"
                 style=" background: red">1</div>
            <div class="count_lable"
                 style=" background: green">3</div>
            <div class="count_lable"
                 style=" background: red">10</div>
          </div>

          <div style="text-align: center">设备异常跟踪</div>

          <div class="alrmtable">
            <el-table height="100%"
                      ref="multipleTable"
                      :data="alarmList"
                      border>
              <el-table-column label="点检时间"
                               align="center"
                               prop="Id" />
              <el-table-column label="操作者"
                               align="center"
                               prop="UserName" />
              <el-table-column label="设备"
                               align="center"
                               prop="RealName" />
              <el-table-column label="部位"
                               align="center"
                               prop="RealName" />
              <el-table-column label="异常描述"
                               align="center"
                               prop="Email" />
              <el-table-column label="处理方法"
                               align="center"
                               prop="Phone" />
              <el-table-column label="状态"
                               align="center"
                               prop="Status" />
            </el-table>
          </div>

        </div>
      </div>
      <div class="content">
        <el-row :gutter="12">
          <el-col :span="8">
            <div class="box">
              <div style=" text-align: center;">混合气站</div>
              <table style="width: 100%;">
                <tr>
                  <td></td>
                  <td>压力</td>
                  <td>余量</td>
                  <td>状态</td>
                </tr>
                <tr>
                  <td>天然气</td>
                  <td>{{HunheqiData.gas_press}} KPa</td>
                  <td>{{HunheqiData.gas_custom}} m3</td>
                  <td>
                    <div id="hunhe1_status"></div>
                  </td>
                </tr>
                <tr>
                  <td>AR罐</td>
                  <td>{{HunheqiData.AR_press}}MPa</td>
                  <td>{{HunheqiData.AR_custom}}Kg</td>
                  <td>
                    <div id="hunhe2_status"></div>
                  </td>
                </tr>
                <tr>
                  <td>CO2罐</td>
                  <td>{{HunheqiData.CO2_press}}Mpa</td>
                  <td>{{HunheqiData.CO2_custom}}Kg</td>
                  <td>
                    <div id="hunhe3_status"></div>
                  </td>
                </tr>
                <tr>
                  <td>配比</td>
                  <td>{{HunheqiData.Peibi}}%</td>
                  <td>输出压力</td>
                  <td>{{HunheqiData.OutPress}}Mpa</td>
                </tr>
              </table>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="box">
              <div style=" text-align: center;">高配房</div>
              <table style="width: 100%;">
                <tr>
                  <td></td>
                  <td>电流</td>
                  <td>电压</td>
                  <td>温度</td>
                  <td>状态</td>
                </tr>
                <tr>
                  <td>A相</td>
                  <td>{{GaopeifangData.CurrentA}}A</td>
                  <td>{{GaopeifangData.VolA}}V</td>
                  <td>{{GaopeifangData.TempA}}℃</td>
                  <td>
                    <div id="gaopeiA_status"></div>
                  </td>
                </tr>
                <tr>
                  <td>B相</td>
                  <td>{{GaopeifangData.CurrentB}}A</td>
                  <td>{{GaopeifangData.VolB}}V</td>
                  <td>{{GaopeifangData.TempB}}℃</td>
                  <td>
                    <div id="gaopeiB_status"></div>
                  </td>
                </tr>
                <tr>
                  <td>C相</td>
                  <td>{{GaopeifangData.CurrentC}}A</td>
                  <td>{{GaopeifangData.VolC}}V</td>
                  <td>{{GaopeifangData.TempC}}℃</td>
                  <td>
                    <div id="gaopeiC_status"></div>
                  </td>
                </tr>
              </table>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="box">
              <div style=" text-align: center;">空压机房</div>
              <table style="width: 100%;">
                <tr>
                  <td></td>
                  <td>压力</td>
                  <td>温度</td>
                  <td>状态</td>
                </tr>
                <tr>
                  <td>1号机</td>
                  <td>{{AirTempData.Press1}}Mpa</td>
                  <td>{{AirTempData.Temp1}}℃</td>
                  <td>
                    <div id="air1_status"></div>
                  </td>
                </tr>
                <tr>
                  <td>2号机</td>
                  <td>{{AirTempData.Press2}}Mpa</td>
                  <td>{{AirTempData.Temp2}}℃</td>
                  <td>
                    <div id="air2_status"></div>
                  </td>
                </tr>
              </table>
            </div>
          </el-col>
        </el-row>
        <div class="content_center">
          <dv-border-box-13>
            <div style="padding: 10px">
              <div style="text-align: center;font-size:36px;margin: 15px;">
                汽车智造实时监控系统汽车智造实时监控系统
              </div>
              <el-row class="content_row">
                <el-col :span="4">
                  <DeviceStatus ref="devicestatus1" ></DeviceStatus>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4">
                  <DeviceStatus ref="devicestatus2"></DeviceStatus>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4">
                  <DeviceStatus ref="devicestatus3"></DeviceStatus>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4">
                  <DeviceStatus ref="devicestatus4"></DeviceStatus>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
              </el-row>
              <el-row class="content_row">
                <el-col :span="4"><img src="@/assets/images/等离子.jpg"
                       /></el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4"> <img src="@/assets/images/等离子.jpg"
                        /></el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4"> <img src="@/assets/images/等离子.jpg"
                        /></el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4"> <img src="@/assets/images/等离子.jpg"
                       /></el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
              </el-row>
              <el-row class="content_row">
                <el-col :span="4">
                  <DeviceStatus ref="devicestatus5"></DeviceStatus>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4"> <img src="@/assets/images/等离子.jpg"
                        /></el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4">
                  <DeviceStatus ref="devicestatus6"></DeviceStatus>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4"> <img src="@/assets/images/等离子.jpg"
                        /></el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
              </el-row>
              <el-row class="content_row">
                <el-col :span="4"><img src="@/assets/images/等离子.jpg"
                        /></el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4"> <img src="@/assets/images/等离子.jpg"
                        /></el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4"> <img src="@/assets/images/等离子.jpg"
                        /></el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4"> <img src="@/assets/images/等离子.jpg"
                      /></el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
              </el-row>
              <el-row class="content_row">
                <el-col :span="4">
                  <DeviceStatusBottom ref="devicestatus7"></DeviceStatusBottom>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4">
                  <DeviceStatusBottom ref="devicestatus8"></DeviceStatusBottom>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4">
                  <DeviceStatusBottom ref="devicestatus9"></DeviceStatusBottom>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
                <el-col :span="4">
                  <DeviceStatusBottom ref="devicestatus10"></DeviceStatusBottom>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content"></div>
                </el-col>
              </el-row>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <div class="right">
        <dv-border-box-12>
          <div id="chart1"></div>
          <div id="chart2"></div>
          <div id="chart3"></div>
        </dv-border-box-12>
      </div>
    </div>
  </div>
</template>

<script>
import {DeviceRealStatus, GetOneWeekEnergy,GetOneWeekGas } from "@/api/devicemanage/homepage";
import DeviceStatus from "./components/DeviceStatus";
import DeviceStatusBottom from "./components/DeviceStatusBottom";

export default {
  name: "Realcharts",
  components: { DeviceStatus, DeviceStatusBottom },
  data() {
    return {
      timer: null,
      alarmList:null, //报警表格列表
      //左侧点检图
      chart_left: null,
      leftoption: null,
      leftXdata: [],
      leftYdata1: [],
      leftYdata2: [],
      //右侧能耗图
      rightchart1: null,
      rightchart2: null,
      rightchart3: null,
      rightoption1: null,
      rightoption2: null,
      rightoption3: null,
      rightData1: {
        Xdata: [],
        Ydata1: [],
        Ydata2: [],
        Ydata3: [],
      },
      rightData2: {
        Xdata: [],
        Ydata1: [],
        Ydata2: [],
        Ydata3: [],
      },
      rightData3: {
        Xdata: [],
        Ydata1: [],
        Ydata2: [],
        Ydata3: [],
      },

      //混合气站数据
      HunheqiData:{
        gas_press:0,
        gas_custom:0,
        AR_press:0,
        AR_custom:0,
        CO2_press:0,
        CO2_custom:0,
        Peibi:0,
        OutPress:0,

      },
      // 高配房数据
      GaopeifangData:{
       CurrentA:0,
        CurrentB:0,
         CurrentC:0,
          VolA:0,
           VolB:0,
            VolC:0,
             TempA:0,
              TempB:0,
               TempC:0
      },
      //空压机数据
      AirTempData:{
        Press1:0,
        Press2:0,
        Temp1:0,
        Temp2:0,
        Status1:false,
        Status2:false
      }
    };
  },
  mounted() {
    this.OneDayRefreshhChart();
    this.getRealData();
    this.timer = setInterval(() => {  
      this.getRealData();

      }, 3000);
  },
  created() {
     this.$nextTick(()=>{
           this.initTitle();
            this.initChart();
             
     });
  },
  beforeDestroy() {
    //页面关闭时清除定时器
    clearInterval(this.timer);
  },
  methods: {
    initTitle() {
      this.$refs.devicestatus1.title = "等离子";
      this.$refs.devicestatus2.title = "埋弧焊";
      this.$refs.devicestatus3.title = "预拱";
      this.$refs.devicestatus4.title = "自动焊";
      this.$refs.devicestatus5.title = "剪折线";
      this.$refs.devicestatus6.title = "机器人";
      this.$refs.devicestatus7.title = "油漆线";
      this.$refs.devicestatus8.title = "抛丸机";
      this.$refs.devicestatus9.title = "翻转机";
      this.$refs.devicestatus10.title = "组焊";
    },
    //实时数据
    getRealData(){
      // 中间
        DeviceRealStatus().then((res)=>{
          let _this =this;
        var model =res.data;
      this.$refs.devicestatus1.RefreshData(_this.GetST(model.DengliziStatus), model.DengliziEnergy, model.Denglizichanlaing, model.DengliziStatus);
      this.$refs.devicestatus2.RefreshData(_this.GetST(model.MaihuhanStatus), model.MaihuhanEnergy, model.Maihuhanchanlaing, model.MaihuhanStatus);
      this.$refs.devicestatus3.RefreshData(_this.GetST(model.YugongStatus), model.YugongEnergy, model.Yugongchanlaing, model.YugongStatus);
      this.$refs.devicestatus4.RefreshData(_this.GetST(model.zidonghanStatus), model.zidonghanEnergy, model.zidonghanchanlaing, model.zidonghanStatus);
      this.$refs.devicestatus5.RefreshData(_this.GetST(model.JianzhexianStatus), model.JianzhexianEnergy, model.Jianzhexianchanlaing, model.JianzhexianStatus);
      this.$refs.devicestatus6.RefreshData(_this.GetST(model.JiqirenStatus), model.JiqirenEnergy, model.Jiqirenchanlaing, model.JiqirenStatus);
      this.$refs.devicestatus7.RefreshData(_this.GetST(model.youqixianStatus), model.youqixianEnergy, model.youqixianchanlaing, model.youqixianStatus);
      this.$refs.devicestatus8.RefreshData(_this.GetST(model.PaowanjiStatus), model.PaowanjiEnergy, model.Paowanjichanlaing, model.PaowanjiStatus);
      this.$refs.devicestatus9.RefreshData(_this.GetST(model.FanzhuanjiStatus), model.FanzhuanjiEnergy, model.Fanzhuanjichanlaing, model.FanzhuanjiStatus);
      this.$refs.devicestatus10.RefreshData(_this.GetST(model.ZuhanStatus), model.ZuhanEnergy, model.Zuhanchanlaing, model.ZuhanStatus);
      });
    },
    initChart() {
      this.rightchart1 = this.$echarts.init(
        document.getElementById("chart1"),
        "dark"
      );
      this.rightchart2 = this.$echarts.init(
        document.getElementById("chart2"),
        "dark"
      );
      this.rightchart3 = this.$echarts.init(
        document.getElementById("chart3"),
        "dark"
      );
      this.chart_left = this.$echarts.init(
        document.getElementById("chart_left"),
        "dark"
      );
      this.rightoption1 = {
        title: {
          text: "电能消耗趋势图",
          left: "center",
          textStyle: {
            color: "White",
          },
        },
        backgroundColor: "#212B4D",
        tooltip: {
          trigger: "axis",
        },
        legend: {
          bottom: "bottom",
          data: ["节约量", "超出量", "实际能耗"],
        },
        xAxis: {
          type: "category",
          data: this.rightData1.Xdata,
        },
        yAxis: [
          {
            type: "value",
            name: "千瓦时",
            min: -1500,
            max: 5000,
            position: "left",
            splitNumber: 10,
          },
          {
            type: "value",
            name: "千瓦时",
            min: -300,
            max: 1000,
            position: "right",
            splitNumber: 10,
            // axisLine: {
            //     lineStyle: {
            //       color:'White'
            //     }
            // },
          },
        ],
        series: [
          {
            name: "节约量",
            data: this.rightData1.Ydata1,
            yAxisIndex: 1,
            type: "bar",
            itemStyle: {
              color: "green",
            },
          },
          {
            name: "超出量",
            data: this.rightData1.Ydata2,
            yAxisIndex: 1,
            type: "bar",
            itemStyle: {
              color: "red",
            },
          },
          {
            name: "实际能耗",
            data: this.rightData1.Ydata3,
            yAxisIndex: 0,
            type: "line",
            itemStyle: {
              color: "#5B99D2",
            },
          },
        ],
      };

      this.rightoption2 = {
        title: {
          text: "天然气消耗趋势图",
          left: "center",
          textStyle: {
            color: "White",
          },
        },
        backgroundColor: "#212B4D",
        tooltip: {
          trigger: "axis",
        },
        legend: {
          bottom: "bottom",
          data: ["节约量", "超出量", "实际能耗"],
        },
        xAxis: {
          type: "category",
          data: this.rightData2.Xdata,
        },
        yAxis: [
          {
            type: "value",
            name: "千瓦时",
            min: -1500,
            max: 5000,
            position: "left",
            splitNumber: 10,
          },
          {
            type: "value",
            name: "千瓦时",
            min: -300,
            max: 1000,
            position: "right",
            splitNumber: 10,
            // axisLine: {
            //     lineStyle: {
            //       color:'White'
            //     }
            // },
          },
        ],
        series: [
          {
            name: "节约量",
            data: this.rightData2.Ydata1,
            yAxisIndex: 1,
            type: "bar",
            itemStyle: {
              color: "green",
            },
          },
          {
            name: "超出量",
            data: this.rightData2.Ydata2,
            yAxisIndex: 1,
            type: "bar",
            itemStyle: {
              color: "red",
            },
          },
          {
            name: "实际能耗",
            data: this.rightData2.Ydata3,
            yAxisIndex: 0,
            type: "line",
            itemStyle: {
              color: "#5B99D2",
            },
          },
        ],
      };

      this.rightoption3 = {
        title: {
          text: "设备当日电能消耗图",
          left: "center",
          textStyle: {
            color: "White",
          },
        },
        backgroundColor: "#212B4D",
        tooltip: {
          trigger: "axis",
        },
        legend: {
          bottom: "bottom",
          data: ["当日累计能耗", "单节标准能耗", "单节实际能耗"],
        },
        xAxis: {
          type: "category",
          data: this.rightData3.Xdata,
        },
        yAxis: [
          {
            type: "value",
            name: "千瓦时",
            min: 0,
            max: 400,
            position: "left",
            splitNumber: 10,
          },
          {
            type: "value",
            name: "千瓦时",
            min: 0,
            max: 100,
            position: "right",
            splitNumber: 10,
            // axisLine: {
            //     lineStyle: {
            //       color:'White'
            //     }
            // },
          },
        ],
        series: [
          {
            name: "当日累计能耗",
            data: this.rightData3.Ydata1,
            yAxisIndex: 0,
            type: "bar",
            itemStyle: {
              color: "green",
            },
          },
          {
            name: "单节标准能耗",
            data: this.rightData3.Ydata2,
            yAxisIndex: 1,
            type: "line",
            // itemStyle: {
            //   color: "red",
            // },
          },
          {
            name: "单节实际能耗",
            data: this.rightData3.Ydata3,
            yAxisIndex: 1,
            type: "line",
            itemStyle: {
              color: "#5B99D2",
            },
          },
        ],
      };

      this.leftoption = {
        title: {
          text: "设备点检状态",
          left: "center",
          textStyle: {
            color: "White",
          },
        },
        backgroundColor: "#212B4D",
        legend: {
          bottom: "bottom",
          data: ["点检完成率", "点检合格率"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "12%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.leftXdata,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "点检完成率",
            type: "line",
            stack: "总量",
            data: this.leftYdata1,
          },
          {
            name: "点检合格率",
            type: "line",
            stack: "总量",
            data: this.leftYdata2,
          },
        ],
      };
      this.rightchart1.setOption(this.rightoption1);
      this.rightchart2.setOption(this.rightoption2);
      this.rightchart3.setOption(this.rightoption3);
      this.chart_left.setOption(this.leftoption);
    },

    // 每天刷新一次图
    OneDayRefreshhChart() {
       GetOneWeekEnergy().then((res)=>{
           if (res.success) {
             var model =res.data;
             this.rightData1.Xdata =model.XTime;
              this.rightData1.Ydata1 =model.SavingValue;
               this.rightData1.Ydata2 =model.OutValue;
                this.rightData1.Ydata3 =model.Actruely;
         this.rightoption1.xAxis.data = this.rightData1.Xdata;
         this.rightoption1.series[0].data = this.rightData1.Ydata1;
         this.rightoption1.series[1].data = this.rightData1.Ydata2;
         this.rightoption1.series[2].data = this.rightData1.Ydata3;
       this.rightchart1.setOption(this.rightoption1);
           }
       });

       GetOneWeekGas().then((res)=>{

       });
    },
  GetST(code){
    switch(code){
      case 0: return '故障';
      case 1: return '运行中';
      case 2: return '停机';
      case 3: return '离线';
    }
  }
  },

 
};
</script>
<style lang="scss" scoped>
.grid-content {
  min-height: 36px;
}
.contain {
  padding: 12px;
  background-color: #212b4d; //#08134b;
  width: 100%;
  height: 100%;
  color: #fff;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8%;
  background: url("../../../assets/images/titleImg.png") no-repeat center center;
  font-size: 36px;
  font-weight: 300;
  color: #fff;
}
.content_main {
  display: flex;
  height: 92%;
}
.left {
  width: 400px;
  border-radius: 20px;
  border: aqua solid 2px;
  margin-right: 2px;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.right {
  width: 400px;
  display: flex;
  flex-direction: column;
}

#chart1,
#chart2,
#chart3 {
  flex: 1;
  height: 30.6%;
  margin: 10px;
}
/* 中间头部和内容 */
.box {
  margin: 2px;
  height: 150px;
  background-color: #212b4d; //#08134b;
  color: #fff;
  border-radius: 20px;
  border: aqua solid 1px;
}

.content_center {
  flex: 1;
}

/* 左侧点检 */
.div1,
.div2,
.div3 {
  width: 90px;
  height: 100px;
  margin-left: 30px;
  display: inline-block;
}

#chart_left {
  padding: 20px;
  height: 300px;
}

.count_lable {
  height: 30px;
  width: 30px;
  border-radius: 5px;
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  text-align: center;
  line-height: 30px; /*设置其文字内容垂直居中*/
}

.count_lable_tite {
  display: inline-block;
  margin-left: 19px;
  margin-right: 20px;
  text-align: center;
  line-height: 30px;
}

.el-table {
  //background-color: #212b4d; //#08134b;
  background-color: transparent;
  //height: 300px;
  width: 100%;
}
.alrmtable {
  width: 100%;
  height: 270px;
}

img {
  margin-bottom: 5px;
  margin-top: 5px;
  width: 100%;
  display: block;
}

#air1_status,
#air2_status,
#hunhe1_status,
#hunhe2_status,
#hunhe3_status,
#gaopeiA_status,
#gaopeiB_status,
#gaopeiC_status {
  width: 35px;
  height: 15px;
  background-color: green;
}

.leftimg {
  // height: 30px;
  // width: 30px;
  font-size: 30px;
  margin-top: 10px;
}
</style>
